<template>
  <view style="width:100%;height:300px;">
    <qiun-data-charts
      type="pie"
      :chartData="chartData"
      :opts="opts"
      :canvas2d="true"
      :animation="true"
    />
  </view>
</template>
<script>
import QiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
export default {
  components: { QiunDataCharts },
  props: ['refreshKey'],
  data() {
    return {
      chartData: {
        series: []
      },
      opts: {}
    }
  },
  watch: {
    refreshKey() { this.genData() }
  },
  mounted() { this.genData() },
  methods: {
    genData() {
      this.chartData = {
        series: [
          { name: '闸阀', data: Math.floor(Math.random()*40+20) },
          { name: '球阀', data: Math.floor(Math.random()*30+15) },
          { name: '蝶阀', data: Math.floor(Math.random()*25+10) },
          { name: '截止阀', data: Math.floor(Math.random()*25+10) },
          { name: '止回阀', data: Math.floor(Math.random()*15+5) },
          { name: '调节阀', data: Math.floor(Math.random()*10+3) }
        ]
      }
    }
  }
}
</script> 